<%@ page import="dk.fuddi.grails.Toilet" %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="layout" content="main"/>
  <title>Toilet List</title>

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() {
      var latLng = new google.maps.LatLng(55.675854, 12.569540);
      var myOptions = {
        zoom: 12,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    <g:each in="${toiletInstanceList}" var="toilet">
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(${toilet.lat}, ${toilet.lng}),
        title: "${toilet.street}"
      });
      // To add the marker to the map, call setMap();
      marker.setMap(map);
    </g:each>
    }
  </script>

</head>
<body onload="initialize();">
<div class="nav">
  <span class="menuButton"><a class="home" href="${resource(dir: '')}">Home</a></span>
  <span class="menuButton"><g:link class="create" action="create">New Toilet</g:link></span>
</div>
<div class="body" style="min-width:300px">
  <h1>Toilet List</h1>
  <g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
  </g:if>
  <div class="list">
    <table>
      <thead>
      <tr>
        <g:sortableColumn property="id" title="Id"/>
        <g:sortableColumn property="street" title="Street"/>
        <g:sortableColumn property="city" title="City"/>
        <g:sortableColumn property="type" title="Type"/>
      </tr>
      </thead>
      <tbody>
      <g:each in="${toiletInstanceList}" status="i" var="toiletInstance">
        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
          <td><g:link action="show" id="${toiletInstance.id}">${fieldValue(bean: toiletInstance, field: 'id')}</g:link></td>
          <td>${fieldValue(bean: toiletInstance, field: 'street')}</td>
          <td>${fieldValue(bean: toiletInstance, field: 'city')}</td>
          <td>${fieldValue(bean: toiletInstance, field: 'type')}</td>
        </tr>
      </g:each>
      </tbody>
    </table>
  </div>
  <div class="paginateButtons">
    <g:paginate total="${toiletInstanceTotal}"/>
  </div>
  <br/>
  <div id="map_canvas" style="width: 100%; height: 300px"></div>
</div>
</body>
</html>
